﻿@page "/docs/components/date"

<DocsPageTitle>
    DateEdit component
</DocsPageTitle>

<DocsPageParagraph>
    A native date field example with <Code>type="date"</Code>.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicDateEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicDateEditExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding">
        By using <Code>bind-*</Code> attribute the selected date will be automatically assigned to the member variable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding">
        When using the event <Code>DateChanged</Code>, you also must define the <Code>Date</Code> value attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithEventExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DateTime">
        DateEdit component also support entering a time part. To enable it just set <Code>InputMode</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditDateTimeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditDateTimeExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Date" Type="TValue" Default="default">
        Gets or sets the input date value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DateChanged" Type="@("EventCallback<TValue>")">
        Occurs when the date has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InputMode" Type="DateInputMode" Default="Date">
        Hints at the type of data that might be entered by the user while editing the element or its contents.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="DateTimeOffset?" Default="null">
        The earliest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="DateTimeOffset?" Default="null">
        The latest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty date.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Step" Type="int" Default="1">
        The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field.
    </DocsAttributesItem>
</DocsAttributes>